<!-- searchRusult -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .search-rusult-container {
    height: 100%;
    @include flexbox(space-between, center, column, nowrap);
    .content {
      width: 100%;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      .product-list {
        background: #fff;
        padding-right: 10px;
        @include flexbox(space-between,
        center,
        row,
        wrap);
        overflow: hidden;
        clear: both;
        .prod-item {
          background: #fff;
          padding-left: 10px;
          flex: 0 0 50%; //  margin: .15rem;
          .item-posre {
            position: relative;
            text-align: center;
            height: 185px;
            img {
              max-height: 185px;
              max-width: 100%;
            }
          }
          .item-product-text {
            padding: .1rem 0 0 .1rem;
            font-size: 14px;
            line-height: 20px;
            height: 40px;
            @include textoverflow(2);
          }
          .item-product-info {
            @include flexbox(flex-start,
            center,
            row,
            wrap);
            color: #f23030;
            padding: 0 0 .2rem .1rem;
            font-size: 16px;
            span {
              i {
                font-size: 12px;
                margin-right: .1rem;
              }
            }
            .jx-btn {
              color: #ffffff;
              font-size: 13px;
              background: $orange;
              border: 1px solid $orange!important;
              padding: 0.1rem 0.2rem;
              @include radius(3px)
            }
            .none {
              background: #ddd;
              border: 1px solid #999!important;
            }
            .original-price {
              i {
                text-decoration: line-through;
              }
              padding: .2rem .1rem .1rem .1rem;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
      .loadmoreText {
        /* background: #f0f3f5; */
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        background: transparent;
        padding: 10px 0;
        >span {
          padding-left: 10px;
        }
      }
    }
  }

  .filters-container {
    .section-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      border-top: 1px solid #eee;
      height: 1.25rem;
      z-index: 2006;
      @include flexbox(space-between,
      center,
      row,
      nowrap);
      .left {
        height: 100%;
        padding: $padding;
        @include flexbox(center,
        center,
        row,
        nowrap);
        background: #fff;
      }
      .right {
        height: 100%;
        background: #FF5959;
        padding: $padding;
        color: #fff;
        @include flexbox(center,
        center,
        row,
        nowrap);
      }
    }
    .filters-content {
      .cell-container {
        background: #fff;
        margin-top: $margin;
        padding-left: $padding;
        .cell-list {
          .cell-header {
            @include flexbox(space-between,
            center,
            row,
            nowrap);
            padding: $padding $padding $padding 0;
            .left {
              span {
                font-size: $title;
                color: #333;
                font-weight: 500;
              }
            }
            .right {
              @include flexbox(flex-end,
              center,
              row,
              nowrap);
              span {
                color: $orange;
              }
              .arrow-right {
                display: block;
                width: 16px;
                height: 16px;
                background: url('~assets/common/images/arrow-right.png') no-repeat;
                background-size: auto 100%;
              }
              &.active-down {
                .arrow-right {
                  display: block;
                  width: 16px;
                  height: 16px;
                  background: url('~assets/common/images/arrow-down.png') no-repeat;
                  background-size: 100% auto;
                }
              }
            }
          }
          .cell-item {
            @include flexbox(space-between,
            center,
            row,
            nowrap);
            border-bottom: 1px solid #eee;
            padding: 5px 5px 5px 0;
            .left {
              span {
                font-size: $title;
                color: #333;
                font-weight: 500;
              }
            }
            .right {
              @include flexbox(flex-end,
              center,
              row,
              nowrap);
              span {
                color: $orange;
              }
              .arrow-right {
                display: block;
                width: 16px;
                height: 16px;
                background: url('~assets/common/images/arrow-right.png') no-repeat;
                background-size: 100%;
              }
            }
          }
          &:last-child {
            .cell-item {
              border: 0
            }
          }
        }
      }
    }
  }

  .filter-list {
    @include flexbox(flex-start,
    center,
    row,
    wrap);
    li {
      width: 25%;
      padding: 2px;
      span {
        font-size: 0;
        padding: 1px;
        background: #EEEEEE;
        box-sizing: border-box;
        display: block;
        text-align: center;
        cursor: pointer;
        input {
          display: none;
        }
        img {
          width: 100%
        }
        b {
          font-size: 12px;
          height: 30px;
          line-height: 30px;
        }
      }
      &.active {
        span {
          color: #fff;
          background: $orange;
        }
      }
    }
  }
</style>
<template>
  <div class="search-rusult-container">
    <!-- header -->
    <div class="my-header">
      <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
      <strong>商品列表</strong>
      <span style="font-size:18px;" @click="()=>visiblePopup.filters=true">筛选</span>
    </div>
    <!-- header -->
    <!-- 搜索内容style="padding-top: 1.25rem;" -->
    <div class="content" style="padding-top: 1.25rem;" id="loadmore">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" :bottom-distance="distance"
        ref="loadmore">
        <ul class="product-list">
          <li class="prod-item" v-for="(item,index) in proData" :key="index" @click="$router.push(`/product/${item.id}`)">
            <div class="item-posre">
              <img v-lazy="item.goodsImg" alt="">
            </div>
            <div class="item-product-text">{{item.sellingPoints}}</div>
            <p class="item-product-info">
              <span><i>&yen;</i>{{item.goodsMoney|formatMoney}}</span> <span class="original-price">&yen;<i>{{item.goodsPrice|formatMoney}}</i></span>
            </p>
          </li>
        </ul>
        <div class="loadmoreText" v-if="showloadmore">{{bottomText}}</div>
      </mt-loadmore>
    </div>
    <!-- 搜索内容 -->
    <!-- 筛选 -->
    <mt-popup v-model="visiblePopup.filters" :closeOnClickModal="true" :modal="false" position="right" class="modal-popup">
      <div class="filters-container">
        <div class="my-header">
          <i class="back iconfont icon-left" @click="()=>visiblePopup.filters=false"></i>
          <strong>筛选</strong>
          <i class="myMsg"></i>
        </div>
        <scroller style="margin-top:1.2rem;background:#fff;z-index:999">
          <div class="filters-content">
            <div class="cell-container">
              <div class="cell-list" v-for="(item,index) in list" :key="index">
                <div class="cell-header">
                  <div class="left">
                    <span v-text="item.name"></span>
                  </div>
                  <div class="right" v-if="item.inner.length > 100" @click="showResidue(item)" :class="{'active-down': item.show}">
                    <i class="arrow-right"></i>
                  </div>
                </div>
                <div class="cell-item" v-if="item.inner.length != 0">
                  <ul class="filter-list">
                    <li :class="{'active':inner.check}" :key="inner.name" v-for="(inner,index) in item.inner" v-if="item.show || index < 100">
                      <span @click="innerCheck(inner, item)">
                                    <input :type="item.type" name="">
                                    <b  v-if="inner.name"  style="font-weight: normal" :id="inner.id" v-text="inner.name"></b>
                                    <img v-if="inner.img" :src="inner.img"></img>
                               </span>
                    </li>
                  </ul>
                </div>
              </div>
              <div style="height:200px"></div>
            </div>

          </div>
        </scroller>
        <div class="section-bar">
          <div class="left" @click="resetFilter()">
            重置
          </div>
          <div class="right" @click="filterData()">
            确定
          </div>
        </div>

      </div>

    </mt-popup>
    <BackHead/>
    <CartIcon/>
    <!-- 筛选 -->
  </div>


</template>

<script>
  import BackHead from 'common/backHead';
  import CartIcon from 'common/cartIcon';
  import {
    searchGoods
  } from '@/service/getData';
  import {
    mapGetters
  } from 'vuex';
  import {
    GetQueryString,
    GetParamString,
    setScrollTop,
    getScrollTop
  } from '@/utils/mixin';
  import {
    Lazyload,
    Indicator,
    Loadmore,
    Toast,
    Popup
  } from 'mint-ui';
  // let jsonData = {
  //    list: []
  // }
  export default {
    data() {
      return {
        proData: [],
        allProLoad: true,
        allLoaded: false,
        token: '',
        showloadmore: false,
        bottomText: "上拉加载更多...",
        distance: 30,
        searchRusultData: [],
        searchParams: {},
        isFirstEnter: false,
        defaultParams: {
          query: '',
          sbar: 0,
          p: 1,
          brand: '',
          style: '',
          sex: '',
          y: '',
          s: '',
          price: '',
          num: '',
          stock: 1,
          type: 1,
          img: 1,
          series: '',
          crowd: '',
          firstStyle: '',
          mixStock: 20
        },
        // newParams: {
        //    query: GetQueryString('query'),
        //    sbar: GetQueryString('sbar'),
        //    p: GetQueryString('p'),
        //    brand: GetQueryString('brand'),
        //    style: GetQueryString('style'),
        //    sex: GetQueryString('sex'),
        //    y: GetQueryString('y'),
        //    s: GetQueryString('s'),
        //    price: GetQueryString('price'),
        //    num: GetQueryString('num'),
        //    stock: GetQueryString('stock'),
        //    type: GetQueryString('type'),
        //    img: GetQueryString('img'),
        //    series: GetQueryString('series'),
        //    crowd: GetQueryString('crowd'),
        //    firstStyle: GetQueryString('firstStyle')
        // },
        jsonData: {
          list: []
        },
        newParams: {},
        pages: null,
        visiblePopup: {
          filters: false
        },
        firstFetch: true,
        list: [], //主数据
        isShowOuter: false, //是否显示 “不限” 页面
        outerList: [], // “不限” 页面里的数据
        outerQuery: "", //首字母筛选条件
        outerLink: {},
        outerName: "",
        commodityNum: 0, //筛选出的商品条数

      };
    },

    watch: {

    },
    components: {
      BackHead,
      CartIcon
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'cartNum'
      ]),
    },
    methods: {
      loadTop() {
        // 下拉刷新
        this.$refs.loadmore.onTopLoaded();
        this.searchParams.p = 1;
        this.fetchData();
      },
      loadBottom() {
        //底部加载更多
        this.$refs.loadmore.onBottomLoaded();
        this.$store.dispatch('SearchGoods', this.searchParams)
          .then(response => {
            this.proData = this.proData.concat(response.data.queryResult.itemList);
            //总页数
            this.pages = response.data.queryResult.pages;
            if (this.searchParams.p < this.pages) {
              this.searchParams.p += 1;
            } else {
              this.bottomText = '没有更多了';
              this.allLoaded = true;
            }
          });
      },
      filterData() {
        var ret = {};
        /*循环父*/
        this.list.map(item => {
          // /*循环子*/
          item.inner.map(innerItem => {
            if (innerItem.check) {
              ret[item.id] = innerItem.id;
            }
          })
        });
        //合并之后赋值到新的对象，不会污染this.defaultParams
        this.searchParams = JSON.parse(JSON.stringify(Object.assign({}, this.defaultParams, ret)));
        this.searchParams.p = 1;
        this.visiblePopup.filters = false;
        //设置到顶部
        setScrollTop(0);
        this.fetchData();
      },
      async fetchData(params) {

        let _this = this;
        //请求数据
        this.$store.dispatch('SearchGoods', this.searchParams)
          .then(response => {
            this.proData = response.data.queryResult.itemList;
            //重组筛选格式
            // if (_this.firstFetch) {
            //    this.formatFilter(response.data.resultList)
            //    _this.firstFetch = false;
            // }
            //总页数
            this.pages = response.data.queryResult.pages;
            this.showloadmore = true;
            if (this.searchParams.p < this.pages) {
              this.searchParams.p += 1;
            } else {
              this.bottomText = '没有更多了';
              this.allLoaded = true;
            }
          });
      },
      async initData() {
        let _this = this;
        //请求数据
        let response = await this.$store.dispatch('SearchGoods', this.defaultParams);
        let data = response.data.resultList;
        this.jsonData.list.push({
          name: "品牌",
          id: "brand",
          type: "radio",
          inner: data.brandList
        });
        this.jsonData.list.push({
          name: "品类",
          id: "firstStyle",
          type: "radio",
          inner: data.firstTypeList
        });
        this.jsonData.list.push({
          name: "上市时间",
          id: "y",
          type: "radio",
          inner: data.yearList
        });
        this.jsonData.list.push({
          name: "适穿季节",
          id: "s",
          type: "radio",
          inner: data.seasonList
        });
        this.jsonData.list.push({
          name: "适穿人群",
          id: "crowd",
          type: "radio",
          inner: data.crowdList
        });
        let newJsonData = JSON.parse(JSON.stringify(Object.assign({}, this.jsonData)));

        newJsonData.list.forEach(item => {
          item.show = false; //默认当直接子数据大于6条时，自动隐藏多余数据
          /*如果有“不限”， 给每个“不限”子数据添加check属性*/
          if (item.outer) {
            item.outer.list.forEach(function (outerItem, outerIndex, outer) {
              outer[outerIndex].check = false;
            })
          }
          item.inner.forEach(function (innerItem, innerIndex) {
            //如果品牌点击进来的
            if (innerItem.id == _this.$route.params.brand) {
              item.inner[innerIndex].check = true;
            } else {
              item.inner[innerIndex].check = false;
            }
          });
          _this.list.push(item);
        });

        // this.newParams = JSON.parse(JSON.stringify(Object.assign({}, this.defaultParams, this.$route.params)));
        //   console.log(this.newParams);
        // this.fetchData();
        //this.filterData = JSON.parse(JSON.stringify(Object.assign({}, data)))

      },
      resetFilter() {
        this.list.map(item => {
          item.inner.forEach(v => {
            v.check = false;
          })
        })
      },
      showResidue(item) {
        item.show = !item.show;
      },
      innerCheck(innerItem, item) {
        if (innerItem.check) {
          innerItem.check = false;
        } else {
          if (item.type != 'checkbox') {
            item.inner.forEach(function (v) {
              v.check = false;
            })
          }
          innerItem.check = true;
        }
      },
    },

    beforeRouteEnter(to, from, next) {
      if (from.name == 'index') {
        to.meta.isBack = true;
      }
      next();
    },
    activated: function () {
      if (this.$route.meta.isBack || this.isFirstEnter) {
        this.proData = [];
        this.searchParams = JSON.parse(JSON.stringify(Object.assign(this.defaultParams, this.$route.params)));
        this.fetchData();
      }
      this.$route.meta.isBack = false;
      this.isFirstEnter = false;
     // 获取购物车数量
      const formData = {
        userId: this.userInfo.id,
        status: 4 // 4金桥一卡通
      }
      this.$store.dispatch('getCartNum', formData)
    },
    mounted: function () {
      this.initData();
      this.isFirstEnter = true;

    },


  }
</script>